﻿<template>
  <div v-if="config.other.dataSource && config.other.dataSource.MetaSettings">
    <el-form>
      <el-form-item label="事件">
        <el-select v-model="config.other.dataSource.APISettings.api_uid" filterable clearable placeholder="请选择" @change="changAPI">
          <el-option
            v-for="(item, index) in apilist"
            :key="index"
            :label="item.name"
            :value="item.no">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="URL">
        <el-input v-model="config.other.dataSource.APISettings.api_url" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="Header">
        <div class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_header')">添加</el-button>
        </div>
        <el-table :data = 'config.other.dataSource.APISettings.input_header' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
          <el-table-column align = "center" prop = 'key' label = 'Key'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'value' label = 'Value'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "50">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_header')" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="Path">
        <div class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_path')">添加</el-button>
        </div>
        <el-table :data = 'config.other.dataSource.APISettings.input_path' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
          <el-table-column align = "center" prop = 'key' label = 'Key'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'value' label = 'Value'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "50">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_path')" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="QueryString">
        <div class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_querystring')">添加</el-button>
        </div>
        <el-table :data = 'config.other.dataSource.APISettings.input_querystring' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
          <el-table-column align = "center" prop = 'key' label = 'Key'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'value' label = 'Value'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "50">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_querystring')" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="PostData">
        <div class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_postdata')">添加</el-button>
        </div>
        <el-table :data = 'config.other.dataSource.APISettings.input_postdata' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
          <el-table-column align = "center" prop = 'key' label = 'Key'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'value' label = 'Value'>
            <template slot-scope="scope">
              <el-input v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "50">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_postdata')" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="返回数据模型设定">
        <el-input v-model="config.other.dataSource.APISettings.dataObject"></el-input>
      </el-form-item>
      <template v-if="config.other.dataSource.APISettings.showPN">
        <el-form-item label="pageSize对象设定">
          <el-input v-model="config.other.dataSource.APISettings.pageSizeObject"></el-input>
        </el-form-item>
        <el-form-item label="page对象设定">
          <el-input v-model="config.other.dataSource.APISettings.pageObject"></el-input>
        </el-form-item>
        <el-form-item label="totalRow对象设定">
          <el-input v-model="config.other.dataSource.APISettings.totalRowObject"></el-input>
        </el-form-item>
        <el-form-item label="totalPage对象设定">
          <el-input v-model="config.other.dataSource.APISettings.totalPageObject"></el-input>
        </el-form-item>
      </template>
    </el-form>
    <slot>
    </slot>
  </div>
</template>
<script>
import { deepCopy } from '../commonUse'
export default {
  props: ['config'],
  data () {
    return {
      apilist: []
    }
  },
  mounted () {
    if (!this.config.other.dataSource) {
      this.$set(this.config.other, 'dataSource', {
        APISettings: {
          api_uid: '',
          api_url: '',
          input_header: [],
          input_path: [],
          input_querystring: [],
          input_postdata: [],
          dataObject: 'data.QueryDatas',
          pageSizeObject: 'data.Count_Of_OnePage',
          pageObject: 'data.CurrentPage',
          totalRowObject: 'data.TotalRow',
          totalPageObject: 'data.TotalPage'
        }
      })
    }
    if (!this.config.other.dataSource.APISettings) {
      this.$set(this.config.other.dataSource, 'APISettings', {
        api_uid: '',
        api_url: '',
        input_header: [],
        input_path: [],
        input_querystring: [],
        input_postdata: [],
        dataObject: 'QueryDatas',
        pageSizeObject: 'Count_Of_OnePage',
        pageObject: 'CurrentPage',
        totalRowObject: 'TotalRow',
        totalPageObject: 'TotalPage'
      })
    }
    if (!this.apilist || this.apilist.length <= 0) {
      this.apilist = this.$store.state.commonData.apiEvents
    }
  },
  methods: {
    changAPI () {
      let self = this
      let list = this.apilist.filter((item, index) => {
        return item.no === self.config.other.dataSource.APISettings.api_uid
      })
      this.config.other.dataSource.APISettings.input_header = []
      this.config.other.dataSource.APISettings.input_path = []
      this.config.other.dataSource.APISettings.input_querystring = []
      this.config.other.dataSource.APISettings.input_postdata = []
      this.config.other.dataSource.APISettings.showPN = true
      this.config.other.dataSource.APISettings.dataObject = 'QueryDatas'
      this.config.other.dataSource.APISettings.pageSizeObject = 'Count_Of_OnePage'
      this.config.other.dataSource.APISettings.pageObject = 'CurrentPage'
      this.config.other.dataSource.APISettings.totalRowObject = 'TotalRow'
      this.config.other.dataSource.APISettings.totalPageObject = 'TotalPage'
      if (list.length > 0) {
        let p = JSON.parse(list[0].request_parameters)
        this.config.other.dataSource.APISettings.api_url = p.RequestUrl
        if (p.RequestHeader) {
          Object.keys(p.RequestHeader).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_header.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestPath) {
          Object.keys(p.RequestPath).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_path.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestQueryString) {
          Object.keys(p.RequestQueryString).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_querystring.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestPostData) {
          Object.keys(p.RequestPostData).forEach((item, index) => {
            this.config.other.dataSource.APISettings.input_postdata.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
      }
      this.$emit('apiChanged', deepCopy(this.config.other.dataSource.APISettings))
    },
    addActionInput (filed_name) {
      if (!this.config.other.dataSource.APISettings[filed_name]) this.config.other.dataSource.APISettings[filed_name] = []
      this.$set(this.config.other.dataSource.APISettings[filed_name], this.config.other.dataSource.APISettings[filed_name].length, {
        key: '',
        value: ''
      })
    },
    handleInputRemove (index, filed_name) {
      this.config.other.dataSource.APISettings[filed_name].splice(index, 1)
    },
    getValueByKey (key) {
      switch (key) {
        case 'limit':
          return '$_limit'
        case 'page':
          return '$_page'
        default:
          return ''
      }
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
</style>
